<!DOCTYPE HTML>
<head>
    <link rel="shortcut icon" href="{{ url_for('static', filename='logo.png') }}">
    <meta charset="utf-8">
    <title>AMR参数表</title>
    <meta name="code-stutio" content="code-123" />
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style type="text/css">
        .title_a {
              background-color: #8F1930;
                color:white;
                text-align:center;
                padding:5px;
            }
            .b {
              overflow: hidden;
              color:#f2f2f2;
              background-color: rgb(72,72,72);
            }


            .b title_a {
              float: left;
              color: #f2f2f2;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
            }


            .b title_a:hover {
              background-color: #ddd;
              color: black;
            }



            .f {
              overflow: hidden;
              color:#f2f2f2;
              background-color: gray;
              height:740px;
              text-align:center;
                width:188px;
                float:right;
            }


            .f title_a {
              float: left;
              color: #f2f2f2;
              text-align: center;
              padding: 10px 70px;
              text-decoration: none;
            }


            .f title_a:hover {
              background-color: #ddd;
              color: black;
            }

            .c {
                line-height:30px;
                background-color:gray;
                color:white;
                height:700px;
                width:104px;
                float:left;
                padding:20px;
            }
            .d {
                float:left;
                padding:50px;
                position:relative;
            }

            .robot_config {
                float:left;
                padding:100px;
                position:relative;
            }

            .e {
                background-color:rgb(40,40,40);
                color:rgb(200,200,200);
                clear:both;
                text-align:center;
               padding:1px;
            }
            .e title_a {
              color: rgb(200,200,200);
              padding: 0px 0px;
              text-decoration: none;
            }
            .e title_a:hover {
              color: rgb(250,250,250);
            }


            .sub a{
                color:white;
                background:#8f1930;
                text-decoration:none;
                padding:7px 120px;
                font-size:13px;
                font-family: arial, serif;
                font-weight:bold;
                -webkit-border-radius:3em;
                -moz-border-radius:.1em;
                -border-radius:.1em;
            }

            table{
                   margin: auto;
                   width:70%;
                   line-height:30px;
            }

            .view{
                width:99%;
                margin:0 auto;
                padding: 0px;
                height:auto;
                border:none;
                resize: none;
                color: #8f1930;
            }
        .view:focus{
            border: none;
            outline: none;
        }
    </style>

</head>
<body>
<div id='editor'></div>
    <div class="title_a">
        <div id="box" style="opacity: 1;">
            <h1>AMR参数表</h1>
        </div>
    </div>
    <p></p>
    <table width="100%" border="1" bgcolor="#fffff0"  style="color:#8f1930;">
        <tr style="text-align: center">
            <td>
                <b>模块</b>
            </td>
            <td>
                <b>参数</b>
            </td>
        </tr>
        {% for item in params %}
        <tr>
            <td style="text-align: center">
                <b contenteditable="true" class="module" data="{{item[0]}}">{{item[0]}}</b>
            </td>
            <td contenteditable="true" class="params" data="{{item[1]}}"><textarea class='view'>{{item[1]}}</textarea></td>

        </tr>
        {% endfor %}
    </table>
    <p></p>
    <div class="sub" style="text-align: center">
        <button id="save">保存</button>
        <p>
            <a href="/">Back-返回首页</a>
        </p>

    </div>
</body>

<script type="text/javascript">
    $(function() {
            //json显示
            $('.params').each(function (i) {
                //格式化显示json
                let json = JSON.stringify(JSON.parse($(this).attr('data')),null,2);
                let view = $('.view').eq(i);
                view[0].value = json;

                view.css({
                    "height" : view[0].scrollHeight + 'px',
                    "overflow-y": "hidden"
                });

                $(this).attr('data', json)

                //根据内容自动调整高度
                view[0].addEventListener('input', (e) => {
                    view[0].style.height = e.target.scrollHeight + 'px';
                });
            });

            $('.module').bind('DOMSubtreeModified', function(e) {
                if ($(e.target).html() != $(this).attr('data')) {
                    //改变了就变色
                    $(this).css({
                        "color": "#198f6e"
                    });
                } else {
                    $(this).css({
                        "color": "#8f1930"
                    });
                }
        　　});

            $('.view').bind('input', function(e) {
                if ($(e.target)[0].value != $(this).parent('.params').attr('data')) {
                    //改变了就变色
                    $(this).css({
                        "color": "#198f6e"
                    });
                } else {
                    $(this).css({
                        "color": "#8f1930"
                    });
                }
        　　});

            $('#save').click(function () {
                var save_data = {};
                $('.module').each(function (i) {
                    var data = $(this).parent().siblings('.params').children('.view')[0].value
                    save_data[$(this).html()] = data;
                })

                $.post("save_configure", save_data, function (data) {
                    if(data.code == 0) {
                        location.reload();
                    }
                })
            });

        });

    </script>

